<template>
  <div class="japan">
    <div class="japan_tit">
      <div class="tit_l">
        <span @click="change(2)" :class="type==2?'blue':''">综合</span>
        <span @click="change(1)"  :class="type==1?'blue':''">最新</span>
        <span @click="change(3)"  :class="type==3?'blue':''">最热</span>
      </div>
      <div class="tit_r">
        <span @click="changeShow"><span ref="all">全部</span><i :class="!ishow?'el-icon-arrow-down':'el-icon-arrow-up'"></i></span>
      </div>
      <div class="fixed" v-if="ishow">
        <span @click="changeLevel(0)" :class="level=='0'?'blue':''">全部</span>
        <span @click="changeLevel(1)" :class="level=='1'?'blue':''" >入门</span>
        <span @click="changeLevel(2,3,4,5)"
        :class="level=='2,3,4,5'?'blue':''">提升</span>
      </div>
    </div>
    <div class="japan_content">
      <div class="content_item" v-for="item in japanlist" :key="item.id">
        <div class="item_l">
          <img :src="'https://ss.lanqb.com/'+item.posters.mobile">
        </div>
        <div class="item_r">
          <h3>{{item.title}}</h3>
          <div class="r_mid">
            <img :src="'https://ss.lanqb.com/' +item.profile.avatar" alt="">
            <span>{{item.profile.nickname}}</span>
            <span>共{{item.preview_setting.lessons_count}}节</span>
          </div>
          <div class="r_bot">
            {{item.study_num}}人在学
          </div>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
export default {
  name: 'ModelView',

  data() {
     return {
      ishow:false,
      japanlist: [],
      isblue:true,
      type:2,
      level:[]
    };
  },

  mounted() {
    
  },
  created() {
    fetch("https://m.lanqb.com/api/course/video?course_fields_ids=2&type=2&limit=8&page=1").then(res=>res.json()).then(res=>{
      console.log(res.data);
      this.japanlist=res.data
    })
  },

  methods:{
    change(type){
      this.type=type;
      console.log(type);
      let url="";
      this.level.length!==0?url=`https://m.lanqb.com/api/course/video?course_fields_ids=2&type=${this.type}&limit=8&page=1&level=${this.level}`:url=`https://m.lanqb.com/api/course/video?course_fields_ids=2&type=${this.type}&limit=8&page=1`;
      fetch(url).then(res=>res.json()).then(res=>{
      console.log(res.data);
      this.japanlist=res.data
    })
    },
    changeLevel(...level){
       this.ishow=false;
      this.level=level.join(",")
      if(level=="0"){
        this.$refs.all.innerHTML="全部";
           fetch("https://m.lanqb.com/api/course/video?course_fields_ids=2&type=2&limit=8&page=1").then(res=>res.json()).then(res=>{
      console.log(res.data);
      this.japanlist=res.data
    })
   }else{
    this.level=level.join(",")
      console.log(this.level);
      if (this.level=="1") {
        this.$refs.all.innerHTML="入门";
      }else{
        this.$refs.all.innerHTML="提升";
      }
        fetch(`https://m.lanqb.com/api/course/video?course_fields_ids=2&type=2&level=${this.level}&limit=8&page=1`).then(res=>res.json()).then(res=>{
      console.log(res.data);
      this.japanlist=res.data
    })
   }
      
    },
    changeShow(){
      this.ishow=!this.ishow;
    }
  },
};
</script>

<style lang="scss" scoped>

</style>